<template>
  <div>
    <!--查询条件start --111s-->
    <el-card>
      <el-form :inline="true" :model="query" class="query-form" size="small">
        <el-form-item class="query-form-item">
          <el-input
            v-model="query.companyName"
            placeholder="公司名称"
            prefix-icon="el-icon-search"
            @keyup.enter.native="onSubmit"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-select
            v-model="query.companyLevel"
            placeholder="请选择公司等级"
            @change="onSubmit"
            clearable
          >
            <el-option clearable label="全球" value="1"></el-option>
            <el-option clearable label="省级" value="2"></el-option>
            <el-option clearable label="市级" value="3"></el-option>
            <el-option clearable label="县级" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-select
            v-model="query.companyType"
            placeholder="请选择公司类型"
            @change="onSubmit"
            clearable
          >
            <el-option clearable label="孵化" value="0"></el-option>
            <el-option clearable label="临时" value="1"></el-option>
            <el-option clearable label="正式" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onRest"
          ></el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <!--查询条件end-->

      <!--列表start --->
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="list"
        :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
        border
      >
        <el-table-column
          label="序号"
          prop="commodityname"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="companylevel" align="center" label="公司级别">
          <template slot-scope="scope">
            <span v-if="scope.row.companylevel == 1">全球</span>
            <span v-else-if="scope.row.companylevel == 2">省级</span>
            <span v-else-if="scope.row.companylevel == 3">市级</span>
            <span v-else-if="scope.row.companylevel == 4">县级</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="companytype" align="center" label="公司类型">
          <template slot-scope="scope">
            <span v-if="scope.row.companytype == 0">孵化</span>
            <span v-else-if="scope.row.companytype == 1">临时</span>
            <span v-else-if="scope.row.companytype == 2">正式</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          label="公司名称"
          :show-overflow-tooltip="true"
          prop="companyname"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.companyname || "无" }}
          </template>
        </el-table-column>
        <el-table-column label="详情" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleCompanyForm(scope.row.companyid)"
              type="primary"
              >公司信息</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination-container"
        background
        :page-size="query.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :current-page="query.currentPage"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="totalNumber"
      ></el-pagination>
      <!--分页模块end-->
      <!--公司详情-->
      <el-dialog
        title="公司信息"
        :visible.sync="companyVisible"
        :before-close="hideCompanyForm"
        width="60%"
        top="5vh"
        v-dialogDrag
        :close-on-click-modal="false"
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  background-color: #3478f5;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
              公司信息
            </span>
          </div>
        </template>
        <el-card>
          <el-form>
            <el-form-item
              label-width="80px"
              label="基本信息"
              style="background: #e1e1e1"
            />
            <el-form-item label-width="40px">
              <el-form-item
                label-width="100px"
                label="发起合伙人："
                style="width: 50%; display: inline-block"
              >
                <span>{{ launchcompany.companyname }}</span>
              </el-form-item>
              <el-form-item
                label="首席合伙人："
                style="width: 50%; display: inline-block"
              >
                <span>{{ company.chiefpartnername }}</span>
                <span v-if="company.isincubate == 1">(孵化)</span>
                <span v-if="company.isdisplacement == 1">(顶替)</span>
              </el-form-item>
            </el-form-item>

            <el-form-item
              label-width="100px"
              label="高级合伙人"
              style="background: #e1e1e1"
            />
            <el-form-item>
              <el-table
                :data="seniorpartner"
                :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
                border
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="80"
                  align="center"
                >
                  <template scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="usernick"
                  align="center"
                  label="用户昵称"
                />
                <el-table-column
                  prop="usermobile"
                  align="center"
                  label="手机号"
                />
                <el-table-column
                  prop="enterprisename"
                  align="center"
                  label="营业执照"
                />
              </el-table>
            </el-form-item>

            <el-form-item
              label-width="100px"
              label="普通合伙人"
              style="background: #e1e1e1"
            />
            <el-form-item>
              <el-table
                :data="generalpartner"
                :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
                border
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="80"
                  align="center"
                >
                  <template scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="usernick"
                  align="center"
                  label="用户昵称"
                />
                <el-table-column
                  prop="usermobile"
                  align="center"
                  label="手机号"
                />
                <el-table-column
                  prop="enterprisename"
                  align="center"
                  label="营业执照"
                />
              </el-table>
            </el-form-item>
          </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="hideCompanyForm">取消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  getMycompanyList, // 获取我的公司列表
  getCompanyPosition,
} from "../../../api/companyManager";

export default {
  components: {},
  data() {
    return {
      companyVisible: false, //信息对话框
      launchcompany: {},
      company: {},
      seniorpartner: [],
      generalpartner: [],
      entityinfo: {},

      uploadData: [],
      query: {
        currentPage: 1,
        companyName: "",
        companyLevel: "",
        pageSize: 10,
        companyType: "",
      },

      list: [], //列表集合
      totalNumber: 0, //分页总页数
      loading: true, //列表加载
    };
  },

  methods: {
    // 获取公司信息详情
    handleCompanyForm(val) {
      let query = {
        companyid: val,
      };
      getCompanyPosition(query).then((response) => {
        if (response.code != 0) {
          this.$message.error(response.message);
          return false;
        }
        this.launchcompany = response.data.launchcompany;
        this.company = response.data.company;
        this.seniorpartner = response.data.seniorpartner;
        this.generalpartner = response.data.generalpartner;
        this.companyVisible = true;
      });
    },
    // 关闭公司详情对话框
    hideCompanyForm() {
      this.companyVisible = false;
      this.launchcompany = {};
      this.company = {};
      this.seniorpartner = [];
      this.generalpartner = [];
    },

    /*获取列表事件*/
    getMycompanyList() {
      this.loading = true;
      getMycompanyList(this.query)
        .then((data) => {
          console.log(data);
          if (data.code != 0) {
            this.$message.error(data.message);
            return false;
          }
          this.list = data.data.list || [];
          this.totalNumber = data.data.totalNumber;
          setTimeout(() => {
            this.loading = false;
          }, 400);
        })
        .catch((err) => {
          this.list = [];
          this.loading = false;
        });
    },
    /*列表查询条件事件*/
    onSubmit() {
      this.query.currentPage = 1;
      this.getMycompanyList();
    },
    /*刷新*/
    onRest() {
      this.query.currentPage = 1;
      this.query.companyName = "";
      this.query.companyLevel = "";
      this.query.companyType = "";
      this.getMycompanyList();
    },
    /*点击页数*/
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.getMycompanyList();
    },
    /*选择每页条数【10,20,30,40,50】*/
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getMycompanyList();
    },
  },

  created() {
    this.getMycompanyList();
    //
  },
};
</script>
<style lang="scss"  scoped>
.darkTag {
  color: #304156;
  // text-decoration: underline;
  // display: inline-block;
  // padding: 1px 5px;
  // border: 1px solid #304156;
  // border-radius: 3px;
  text-shadow: 0 2px 3px rgba(48, 65, 86, 0.3);
  cursor: pointer;
}
span.darkTag + span {
  margin-left: 10px;
}
</style>
